<template>
    <view
        class="layout list my-8 sm:my-24 grid grid-cols-2 gap-6 sm:gap-20 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        <movie-card
            v-for="item in movieList"
            :key="item.id"
            :movie="item"
            :isCollected="collectedIds.includes(item.id)"
            @collect="hadnleCollect" />
    </view>
</template>

<script setup lang="ts">
import { addCollectAPI, deleteCollectAPI, getCollectAPI, getCollectsAPI, getMoviesAPI } from "@/api";
import MovieCard from "@/components/movie-card/index.vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const movieList = ref<any[]>([]);
const collectedList = ref<any[]>([]);

const collectedIds = computed(() => collectedList.value.map(item => item.movieId));

const getList = async () => {
    const res = await getMoviesAPI();
    const collects = await getCollectsAPI(userStore.userinfo.id);
    collectedList.value = collects;
    movieList.value = res;
};

onShow(() => {
    getList();
});

const hadnleCollect = async (status: boolean, collectData: any) => {
    const { id: dataId, ...data } = collectData;
    if (status) {
        await addCollectAPI(userStore.userinfo.id, dataId, data);
    } else {
        const res = await getCollectAPI(userStore.userinfo.id, dataId);
        await deleteCollectAPI(res[0].id);
    }
};
</script>

<style scoped lang="scss">
// .list {
//     margin-block: 100px;
//     display: grid;
//     grid-template-columns: repeat(4, 1fr);
//     gap: 80px;
// }
</style>
